16장 프로퍼티 어트리뷰트

const o = {};
 
//내부 슬롯은 js 엔진의 내부 로직이므로 직접 접근할 수는 없다.
o.[[Prototype]] //Uncaught SyntaxError: Unexpected token '['
 
// 단, [[Prototype]] 내부 슬롯의 경우, 간접적으로 접근이 가능하다.
o.__proto__ //Object.prototype

const o = {};
Object.getPrototypeOf(o); // [[Prototype]]: Object
 
const parent = { foo: "bar" };
Object.setPrototypeOf(o, parent);
console.log(o.foo); //"bar"

const person = {
  name: `Lee`,
};
 
//Object.getOwnPropertyDescriptor() : (객체의 참조, 프로퍼티 키(문자열))로 메소드의 매개변수를 전달
console.log(Object.getOwnPropertyDescriptor(person, "name"));
// {value: 'Lee', writable: true, enumerable: true, configurable: true}

const person = {
  //프로퍼티 생성
  name: `Lee`,
};
 
//프로퍼티 동적 생성
person.age = 20;
 
console.log(Object.getOwnPropertyDescriptors(person));

const person = {
  name: "Lee",
};
 
console.log(Object.getOwnPropertyDescriptor(person, "name"));
// {value: 'Lee', writable: true, enumerable: true, configurable: true}

const person = {
  //데이터 프로퍼티
  firstName: "Ungmo",
  lastName: "Lee",
 
  //접근자 프로퍼티 -> 접근자 함수 fullName으로 정의
  get fullName() {
    //getter
    return `${this.firstName} ${this.lastName}`;
  },
 
  set fullName(name) {
    //setter
    [this.firstName, this.lastName] = name.split(" ");
    //배열 디스트럭처링 할당 -> 배열의 각 요소를 변수에 할당(31장에서 자세히 살펴보자)
  },
};
 
//1. 데이터 프로퍼티를 통한 프로퍼티 값의 참조
console.log(person.firstName + " " + person.lastName); //Ungmo Lee
 
//2. 접근자 프로퍼티를 통한 프로퍼티 값의 저장
person.fullName = "Heegun Lee"; //setter 접근자 함수 호출
console.log(person); //{firstName: "Heegun", lastName: "Lee"}
 
//3. 접근자 프로퍼티를 통한 프로퍼티 값의 참조
console.log(person.fullName); //getter 함수 호출
//Heegun Lee
 
//4. 데이터 프로퍼티의 프로퍼티 디스크립터 객체를 반환하여 프로퍼티 어트리뷰트 확인
let descriptor = Object.getOwnPropertyDescriptor(person, "firstName");
console.log(descriptor); // {value: "Heegun", wirtable: true, enumerable: ture, configurable: true}
 
//5. 접근자 프로퍼티의 프로퍼티 디스크립터 객체를 반환하여 프로퍼티 어트리뷰트 확인
descriptor = Object.getOwnPropertyDescriptor(person, "fullName");
console.log(descriptor); // {get: f, set: f, enumerable: true, configurable: true}

//일반 객체의 __proto__ => 접근자 프로퍼티
Object.getOwnPropertyDescriptor(Object.prototype, "__proto__");
// {get: f, set:f, enumerable: false, configurable: true}
 
//함수 객체의 prototype => 데이터 프로퍼티
Object.getOwnPropertyDescriptor(function () {}, "prototype");
// {value: { ... }, writable: true, enumerable: false, configurable: false}

const person = {};
 
//데이터 프로퍼티 정의
Object.defineProperty(person, "firstName", {
  value: "Ungmo",
  writable: true,
  enumerable: true,
  configurable: true,
});
 
Object.defineProperty(person, "lastName", {
  value: "Lee",
  //일부 프로퍼티 어트리뷰트만 지정할 수도 있음.
});
 
//1. 프로퍼티 데스크립터 객체로 데이터 프로퍼티 접근하기
let decriptor = Object.getOwnPropertyDescriptor(person, "firstName");
console.log("firstName", descriptor);
// firstName {value: 'Ungmo', writable: true, enumerable: true, configurable: true}
 
//2. 일부 프로퍼티 누락 시 undefined, false가 기본값이다.
descriptor = Object.getOwnPropertyDescriptor(person, "lastName");
console.log("lastName", descriptor);
// lastName {value: 'Lee', writable: false ...}
 
//3. [[Enumerable]]의 값이 false인 경우 -> Object.keys로 열거되지 않는다.
console.log(Object.keys(person));
// ["firstName"]
 
//4. [[Writable]]의 값이 false인 경우 -> [[Value]]의 값을 변경할 수 없다.
person.lastName = "Kim";
//에러는 발생하지 않고 그냥 무시된다.
 
//5. [[Configurable]]의 값이 false인 경우 -> 해당 프로퍼티를 삭제할 수 없다.
delete person.lastName;
//에러는 발생하지 않고 그냥 무시된다.
 
//5-1. [[Configurable]]의 값이 false인 경우 -> 해당 프로퍼티를 재정의할 수 없다.
Object.defineProperty(person, "lastName", { enumerable: true });
//Uncaught TypeError: Cannot redefine property: lastName
descriptor = Object.getOwnPropertyDescriptor(person, "lastName");
console.log("lastName", descriptor);
// 재정의되지 않은 모습을 볼 수 있다.
// lastName {value: 'Lee', writable: false, enumerable: false ...}
 
//접근자 프로퍼티 정의
Object.defineProperty(person, "firstName", {
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  set(name) {
    [this.firstName, this.lastName] = name.split(" ");
  },
  enumerable: true,
  configurable: true,
});
 
descriptor = Object.getOwnPropertyDescriptor(person, "fullName");
console.log("fullName", descriptor);
// fullName {get: f, set: f, enumerable: true, configurable: true}
 
person.fullName = "Heegun Lee";
console.log(person);
// {firstName: "Heegun", lastName: "Lee"}

const person = {};
 
Object.defineProperties(person, {
  //데이터 프로퍼티 정의
  firstName: {
    value: "Ungmo",
    writable: true,
    enumerable: true,
    configurable: true,
  },
  lastName: {
    value: "Lee",
    writable: true,
    enumerable: true,
    configurable: true,
  },
 
  //접근자 프로퍼티 정의
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    set(name) {
      [this.firstName, this.lastName] = name.split(" ");
    },
    enumerable: true,
    configurable: true,
  },
});
 
person.fullName = "Heegun Lee";
console.log(person);
// {firstName: "Heegun", lastName: "Lee"}

const person = { name: "Lee" };
 
console.log(Object.isExtensible(person)); //true
 
Object.preventExtensions(person); //객체 확장 금지
 
console.log(Object.isExtensible(person)); //false
 
//1. 객체 확장 금지 -> 프로퍼티 추가도 금지
person.age = 20; // 그냥 무시됨. strict mode에서는 에러 발생
console.log(person); // {name: "Lee"}
 
//2. 프로퍼티 추가는 금지 but 삭제는 가능함!
delete person.name;
console.log(person); // {}
 
//3. 프로퍼티 정의에 의한 프로퍼티 추가도 금지
object.defineProperty(person, "age", { value: 20 });
//TypeError: cannot define property age, object is not extensible

const person = { name: "Lee" };
 
console.log(Object.isSealed(person)); //false
 
Object.seal(person); //객체 밀봉
 
console.log(Object.isSealed(person)); //true
 
//1. 밀봉된 객체는 configurable이 false다.
console.log(Object.getOwnPropertyDescriptors(person));
/*
{
	name: {value: "Lee", writable: true, enumerable: true, configurable: false},
}
*/
 
//2. 프로퍼티 추가 금지
person.age = 20; // 그냥 무시됨. strict mode에서는 에러 발생
console.log(person); // {name: "Lee"}
 
//3. 프로퍼티 삭제 금지
delete person.name; // 그냥 무시됨. strict mode에서는 에러 발생
console.log(person); // {name: "Lee"}
 
//4. 프로퍼티 값 갱신은 가능
person.name = "Kim";
console.log(person); // {name: "Kim"}
 
//5. 프로퍼티 어트리뷰트 재정의 금지
object.defineProperty(person, "name", { configurable: true });
//TypeError: cannot redefine property: name

const person = { name: "Lee" };
 
console.log(Object.isFrozen(person)); //false
 
Object.freeze(person); //객체 밀봉
 
console.log(Object.isFrozen(person)); //true
 
//1. 동결된 객체는 writable과 configurable이 false다.
console.log(Object.getOwnPropertyDescriptors(person));
/*
{
	name: {value: "Lee", writable: false, enumerable: true, configurable: false},
}
*/
 
//2. 프로퍼티 추가 금지
person.age = 20; // 그냥 무시됨. strict mode에서는 에러 발생
console.log(person); // {name: "Lee"}
 
//3. 프로퍼티 삭제 금지
delete person.name; // 그냥 무시됨. strict mode에서는 에러 발생
console.log(person); // {name: "Lee"}
 
//4. 프로퍼티 값 갱신 금지
person.name = "Kim";
console.log(person); // {name: "Lee"}
 
//5. 프로퍼티 어트리뷰트 재정의 금지
object.defineProperty(person, "name", { configurable: true });
//TypeError: cannot redefine property: name

const person = {
  name: "Lee",
  address: { city: "Seoul" },
};
 
// 얕은 객체 동결
Object.freeze(person);
 
// 직속 프로퍼티만 동결됨.
console.log(Object.isFrozen(person)); //true
// 중첩 객체는 동결하지 못 한다.
console.log(Object.isFrozen(person.address)); // false
 
// 중첩 객체 동결 실패로 객체 값 변경이 가능함
person.address.city = "Busan";
console.log(person); // {name: "Lee", address: {city: "Busan"}}

function deepFreeze(target) {
  //객체가 아니거나 이미 동결된 객체는 무시
  if (target && typeof target === "object" && !Object.isFrozen(target)) {
    Object.freeze(target); // 동결되지 않은 객체 동결
 
    //모든 프로퍼티 순회하면서 재귀적으로 동결
    Object.keys(target).forEach((key) => deepFreeze(target[key]));
    //keys : 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환
    //forEach : 배열을 순회하며 각 요소에 대해 콜백 함수 실행
  }
  return target;
}
 
const person = {
  name: "Lee",
  address: { city: "Seoul" },
};
 
// 깊은 객체 동결 -> 불변 객체
deepFreeze(person);
 
console.log(Object.isFrozen(person)); //true
// 중첩 객체도 동결
console.log(Object.isFrozen(person.address)); // true
 
// 읽기만 가능
person.address.city = "Busan";
console.log(person); // {name: "Lee", address: {city: "Seoul"}}